<template>
    <div class="radar">
        <!-- <div class="top">
            <span style="color: aliceblue;font-weight: 700;font-size: 20px;">年龄分布</span>
            <div class="logo"></div>

        </div> -->
        <LeftTop>
            <div>预约渠道数据统计</div>
        </LeftTop>


        <div class="charts" ref="charts"></div>
    </div>
</template>
<script setup name='radar'>
    import LeftTop from '@/components/LeftTop/index.vue'
    import { ref, onMounted } from 'vue'
    //echarts插件引入
    import * as echarts from 'echarts'
    //水球图拓展插件
    import 'echarts-liquidfill'
    let people = ref('20008123人')
    //水球图的实例
    let charts = ref()
    onMounted(() => {
        let mycharts = echarts.init(charts.value)
        mycharts.setOption({


            grid: {
                left: 0,
                top: 0,
                right: 0,
                bottom: 10
            },
          
            legend: {
right:0,
top:0,
textStyle:{
    color:'#fff',
}
,
                data: ['分配预算', '实际支出']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                    { name: 'Sales', max: 6500 },
                    { name: 'Administration', max: 16000 },
                    { name: 'Information Technology', max: 30000 },
                    { name: 'Customer Support', max: 38000 },
                    { name: 'Development', max: 52000 },
                    { name: 'Marketing', max: 25000 }
                ]
            },
            series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '分配预算'
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '实际支出'
                        }
                    ]
                }
            ]
        
    })
    })
</script>
<style scoped lang='scss'>
    .radar {
        margin: 10px 0 50px 30px;
        position: relative;
        background: url('@/views/screen/images/dataScreen-main-lt.png') no-repeat;
        background-size: cover;



        .center {
            margin-top: 40px;
            display: flex;

            justify-content: center;

            .left {
                margin: 20px;
                width: 111px;
                height: 115px;
                background: url('@/views/screen/images/man-bg.png') no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .right {
                margin: 20px;
                width: 111px;
                height: 115px;
                background: url('@/views/screen/images/woman-bg.png') no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .bottom {
            padding: 0 114px;
            display: flex;
            justify-content: space-between
        }


    }

    .charts {
        width: 100%;
        height: calc(100% - 40px);

    }
</style>